<template>
  <div style="height: 100%;">
    
    
    <div class="box1">
      <div style="display: inline-flex;margin-top: 5px;text-align: left;">
        <img style="height: 48px;margin-top: 0.2vh;" src="../../assets/images/compare.png">
        <div style="margin-left: 5px;margin-top:14px;font-family:emoji;color: #f2f2f2;font-size: 0.9vw;">对比基准1：潍坊燃料电池热电综合供能示范工程</div>
      </div>
      
      <el-select style="float: right;margin-top: 1vh;margin-right: 1vh;" @change="verificat1()" v-model="type1" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
 
    </div>
    
    <div class="box2">

      <el-table ref="table" height="225" :data="tableData1" tooltip-effect="dark" style="width: 100%">
  
        <el-table-column
          prop="data1"
          label="对比基准投资成本(元/kW)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data2"
          label="模型计算投资成本(元/kW)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data3"
          label="模型误差(%)"
          align="center">
        </el-table-column>
     
      </el-table>

    </div>


    
    
    <div class="box3">

      <div style="display: inline-flex;margin-top: 5px;text-align: left;">
        <img style="height: 48px;margin-top: 0.2vh;" src="../../assets/images/compare.png">
        <div style="margin-left: 5px;margin-top:14px;font-family:emoji;color: #f2f2f2;font-size: 0.9vw;">对比基准2：美国能源部氢和燃料电池技术办公室发布的《Hydrogen and Fuel Cell Technologies Office Multi-Year Program Plan | 2024》</div>
      </div>

      <el-select style="float: right;margin-top: 1vh;margin-right: 1vh;" @change="verificat2()" v-model="type2" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      
    </div>
    
    <div class="box4">

      <el-table ref="table" height="225" :data="tableData2" tooltip-effect="dark" style="width: 100%">
  
        <el-table-column
          prop="data1"
          label="对比基准投资成本(元/kW)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data2"
          label="模型计算投资成本(元/kW)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data3"
          label="模型误差(%)"
          align="center">
        </el-table-column>

      </el-table>

    </div>


  </div>
</template>

<script>
 

  export default {
    name: 'pemfcErrorModel',
    components: {
      
     },

    data() {
      return {
        options: [
          {
            value: 'pemfc',
            label: 'PEMFC热电联供经济性分析'
          },  
          {
            value: 'gmwh',
            label: '燃⽓掺氢经济性分析'
          },
        ],
        tableData1:[
           
        ],
        tableData2:[
           
        ],
        type1 : "pemfc",
        type2 : "pemfc",
        projectId : ""
      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.verificat1();
      this.verificat2();
    },
    methods: {  
      
      verificat1 : function(){
        
        var type = this.type1;

        var vm = this;  

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/verificat?type='+type+"&projectId="+this.projectId).then((res) => { 
          var result = res.data;
          
          if(result){
            vm.tableData1 = result.tableData1; 
          }
        }).catch((error) => {
          console.log(error);
        });

      },
      verificat2 : function(){
        
        var type = this.type2;

        var vm = this;  

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/verificat?type='+type+"&projectId="+this.projectId).then((res) => { 
          var result = res.data;
          
          if(result){
            vm.tableData2 = result.tableData2; 
          }
        }).catch((error) => {
          console.log(error);
        });

      },

    }
  }
</script>

<style scoped>


/deep/ .el-table th.el-table__cell.is-leaf {
     border-bottom: none;
 }
 /deep/ .el-table::before{
     background-color:transparent;
 }



    .titleDiv {
      width: 100%;
      margin: 0.5vh;
      height: 2.5vh; 
      font-weight: bold; 
      -webkit-box-shadow: none;
      box-shadow: none;
      font-weight: 700;
      font-style: normal;
      font-size: 2vh;
      color: #f2f2f2;
      text-align: left;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      position: relative;
    }
    .barColorBox {
      height: 2.5vh;
      width: 0.7vh;
      border-radius: 1px;
      display: inline-block;
      vertical-align: text-bottom;
      border: none;
      box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
      background-color: #FAFAFA;
      background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
      background-image: -o-linear-gradient(top,#17b4db,#07c968);
      background-image: -ms-linear-gradient(top,#17b4db,#07c968);
      background-image: linear-gradient(top,#17b4db,#07c968);
      background-repeat: repeat-x;
    }

    .titlefont {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      font-size: 1.8vh;
      padding-left: 5px;
      margin-top: 0vh;
    } 
    
  .box1{ 
    width: 98%;
    height: 6vh;
    margin: auto;
    border-radius: 5px;
    text-align: left;
    margin: auto;
    margin-top: 1vh;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box2{ 
    width: 96%;
    height: 26vh;
    margin-top: 1vh;
    margin: 0 auto;
    padding: 15px;
    top: 17.5vh;
    left: 3.5vh;
    position: absolute;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  
  .box3{ 
    width: 98%;
    height: 6vh;
    margin: auto;
    border-radius: 5px;
    text-align: left;
    margin: auto;
    margin-top: 29vh;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box4{ 
    width: 96%;
    height: 26vh;
    margin-top: 1vh;
    margin: 0 auto;
    padding: 15px;
    top: 52.5vh;
    left: 3.5vh;
    position: absolute;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }


</style>
